.left-nav {
  margin-top: 10px;

  & > ul {
    list-style: none;
    margin: 0;
    padding: 5px 0;

    & > li {
      & > a {
        border-bottom: 1px solid #ededed;
        display: block;
        padding: 5px 10px 5px 13px;
        color: #666;
        text-decoration: none;
        position: relative;

        i {
          margin-right: 10px;
          opacity: .8;
        }

        em {
          float: right;
          font-style: normal;
          font-size: 11px;
          margin: 0;
          position: absolute;
          right: 10px;
        }
      }

      &:last-child > a {
        border: 0;
      }

      &.active {
        & > a {
          color: #fff;
          text-shadow: 0 1px #4f7f92;
          .vertical-gradient(#83b3c3, #5295b0);
          border-bottom-color: #ccc;

          i {
            background-image: url(../img/glyphicons-halflings-white-shadow.png);
            opacity: 1;
          }

          &:after {
            content: url('../img/cc_active_nav.png');
            display: inline-block;
            margin-right: -21px;
            float: right;
            margin-top: -5px;
          }
        }

        ul {
          display: block;
        }
      }

      &.separator, &.separator:hover {
        background: #f0f0f0 !important;
        height: 7px;
        display: block;
      }

      ul {
        display: none;
        border-bottom: 1px solid #ededed;
        background-color: #f6f7f8;
        margin: -1px 0 0 0;
        padding: 7px 0 7px 0;
        .box-shadow(inset 0px 3px 3px -2px rgba(0, 0, 0, 0.2));
        list-style: none;

        li {
          a {
            display: block;
            padding: 3px 0 4px 27px;
            text-decoration: none;

            &:hover {
              background-color: #f1f1f1;
              .white-shadow-max;
            }

            &.add { //                            margin-bottom: 5px;
              padding: 4px 0 4px 13px;

              i {
                margin-right: 5px;
                opacity: .7;
              }
            }

            i {
              margin-left: -20px;
              margin-right: 5px;
              opacity: .7;
            }
          }

          &.active a { //                        background-color: white;
            color: #333;
            font-weight: bold;
          }
        }
      }

      &:not(.active):hover {
        background: #f5f5f5;

        > ul {
          display: block;
          position: absolute;
          left: 180px;
          padding: 0;
          margin-top: -30px;
          margin-right: -250px; // offset out of left column
          .border-radius(@border-radius);
          .box-shadow(none);
          .greyer-box-shadow;
          z-index: 10;

          > li {
            border-bottom: 1px solid #e5e5e5;
            border-top: 1px solid white;
            background-color: transparent;

            a {
              padding: 3px 25px 3px 15px;

              &:hover { //                                background-color: transparent;
              }
            }

            &:hover {
              border-bottom: 1px solid #f1f1f1;
              border-top: 1px solid #f1f1f1;
            }

            &:first-child {
              border-top: 0;

              a {
                .border-radius(@border-radius, @border-radius, null, null);
                padding-top: 4px;
              }
            }

            &:last-child {
              border-bottom: 0;

              a {
                .border-radius(null, null, @border-radius, @border-radius);
                padding-bottom: 4px;
              }
            }
          }
        }
      }
    }
  }
}
